<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseImage from '~/components/BaseImage.vue'
// 直接使用AppSelect组件
import AppSelect from '~/components/AppSelect.vue'

// 使用国际化函数
const { locale, t } = useI18n()

// 导入图片资源
import arrowLeft from '/images/webp/affiliate-program/arrow-left.webp'
import arrowRight from '/images/webp/affiliate-program/arrow-right.webp'
import arrowRightGreen from '/images/webp/personal/arrow-right-green.webp'
import avatar from '/images/webp/personal/avatar.webp'
import balanceIcon from '/images/webp/personal/balance-icon.webp'
import bgLogo from '/images/webp/personal/bg-logo.webp'
import priceIcon from '/images/webp/personal/price-icon.webp'

// 导入菜单图标
import activities from '/images/webp/personal/icons/activities_icon.webp'
import antiWater from '/images/webp/personal/icons/antiWater_icon.webp'
import betting from '/images/webp/personal/icons/betting_icon.webp'
import drawing from '/images/webp/personal/icons/drawing_icon.webp'
import exchange from '/images/webp/personal/icons/exchange_icon.webp'
import interest from '/images/webp/personal/icons/interest_icon.webp'
import languageIcon from '/images/webp/personal/icons/language-icon.webp'
import logoutIcon from '/images/webp/personal/icons/logout.webp'
import monetary from '/images/webp/personal/icons/monetary_icon.webp'
import notice from '/images/webp/personal/icons/notice_icon.webp'
import opinions from '/images/webp/personal/icons/opinions-icon.webp'
import serviceIcon from '/images/webp/personal/icons/service-icon.webp'
import setting from '/images/webp/personal/icons/setting_icon.webp'
import statistics from '/images/webp/personal/icons/statistics_icon.webp'
import transaction from '/images/webp/personal/icons/transaction_icon.webp'
import union from '/images/webp/personal/icons/union_icon.webp'
import iconSearch from '/images/webp/notification/icon_search.webp'

const router = useRouter()
const appStore = useAppStore()
const { userInfo } = storeToRefs(appStore)
const { runMemberLogout } = useLogout()
// 用户信息
const userInfoDate = ref()

// 导入语言相关的store
import { useLanguageStore } from '~/stores/language'
import type { EnumLanguageKeys } from '~/utils/i18n'
const languageStore = useLanguageStore()

definePageMeta({
  layout: 'other'
});

const {
  currentLevel,
  progress,
} = useVipInfo()

const _progressString = computed(() => `${+progress.value > 100 ? 100 : progress.value}%`)

// 语言选择相关
const currentLanguage = ref(languageStore.userLanguage)
const languageOptions = languageStore.AllLanguages.map((lang: any) => ({
  label: lang.title,
  value: lang.value
}))

// 获取当前语言的显示文本
const getCurrentLanguageLabel = () => {
  const currentLang = languageOptions.find((lang: { label: string, value: string }) => lang.value === currentLanguage.value)
  return currentLang ? currentLang.label : ''
}

// AppSelect引用
const languageSelectRef = ref<any>()

// 选择语言
const handleSelectLanguage = (langValue: EnumLanguageKeys) => {
  languageStore.changeLanguage(langValue)
}

// 打开语言选择器
const openLanguageSelect = () => {
  if (languageSelectRef.value) {
    languageSelectRef.value.showSelect = true
  }
}
// 定义菜单项类型
interface MenuItem {
  icon: string
  title: string
  route: string
  hasRightText: boolean
  rightText: string
  notification?: number
  isLanguageMenu?: boolean
  isExchangeCode?: boolean
}
// 菜单数据 - 二维数组结构
const menuGroups = ref<MenuItem[][]>([
  // 功能菜单组
  [
    { icon: interest, title: t('interest_treasure'), route: '/wallet/vault', hasRightText: false, rightText: '' },
    { icon: union, title: t('affiliate_program'), route: '/affiliate-program', hasRightText: false, rightText: '' },
    { icon: statistics, title: t('statistics_data'), route: '/record/statistics', hasRightText: false, rightText: '' },
    { icon: transaction, title: t('transaction_records'), route: '/trade-record', hasRightText: false, rightText: '' },
    { icon: betting, title: t('bet-record'), route: '/bets', hasRightText: false, rightText: '' },
    { icon: antiWater, title: t('rebate_center'), route: '/record/betrayal', hasRightText: false, rightText: '' },
    { icon: activities, title: t('promotional_activities'), route: '/promotions/promotion', hasRightText: false, rightText: '' },
  ],
  // 兑换码单独一组
  [
    { icon: exchange, title: t('exchange_code'), route: '/exchange-code', hasRightText: false, rightText: '', isExchangeCode: true},
  ],
  // 底部菜单组
  [
    { icon: notice, title: t('notifications'), route: '/notification', hasRightText: false, rightText: '', notification: 2 },
    { icon: setting, title: t('settings'), route: '/setting', hasRightText: false, rightText: '' },
    { icon: serviceIcon, title: t('online_support'), route: '/support', hasRightText: false, rightText: '' },
    { icon: languageIcon, title: t('language'), route: '', hasRightText: true, rightText: getCurrentLanguageLabel(), isLanguageMenu: true },
    { icon: opinions, title: t('leave_feedback'), route: '/feedback', hasRightText: false, rightText: '' },
  ]
])

function pushMenu(item: any) {
  if (item.route) {
    router.push(`/${locale.value}${item.route}`)
  }
}

function pushRouter(item: string , tab?: number) {
  const path = `/${locale.value}${item}`
  if (tab) {
    console.log("tab",tab);
    router.push({ path , query: { fromClick: tab } })
  }else {
    router.push(path)
  }
}
// 控制登出弹窗显示
const showLogoutModal = ref(false)
// 控制兑换码弹窗显示
const showRedemptionModal = ref(false)
// 红利代码
const redemptionCode = ref('')
// 登出操作
const handleLogout = () => {
  // 显示登出确认弹窗
  showLogoutModal.value = true
}

// 确认登出
const confirmLogout = () => {
  console.log(t('user_logout'))
  // 这里添加实际登出逻辑
  showLogoutModal.value = false
  runMemberLogout()
  Local.clear()
  location.replace('/')
}

// 取消登出
const cancelLogout = () => {
  showLogoutModal.value = false
}
const { currentGlobalCurrency } = storeToRefs(useAppStore())
const globalCurrencyCode = computed(() => currencyConfig[currentGlobalCurrency.value]?.cur ?? '701')

const { run: runGetClaim } = useRequest(ApiMemberExchangeClaim, {
  onSuccess(res) {
    console.log(res);
    // 领取成功
    if (res.state === 1){
      showRedemptionModal.value = false
      message.success(`${ t('receive_success')}`)
    }
    // 兑换码已领取
    if (res.state === 3)
      message.error(`${ t('coupon_received')}`)
    // 兑换码无效
    if ([2, 4, 5].includes(res.state))
      message.error(`${ t('coupon_invalid')}`)
  },
})
const openExchangeCodeDialog = ()=>{
  showRedemptionModal.value = true
}
// 取消兑换码弹框
const cancelRedemption = () => {
  showRedemptionModal.value = false
}
// 兑换码提交
const submitRedemptionCode = () => {
  try{
    runGetClaim({ code: redemptionCode.value, curr_id: globalCurrencyCode.value })
  }catch{
    message.error(`${ t('coupon_invalid')}`)
  }
}
function navigateBack() {
  router.back()
}
onMounted(() => {
  userInfoDate.value = {...userInfo.value}
  console.log(userInfo.value);
  
  })
</script>

<template>
  <div class="personal-container">
    <!-- 顶部区域 -->
    <div class="header-section">
      <div class="back-icon">
        <BaseImage @click="navigateBack" width="6px" height="9px" style="height: 9px;" :url="arrowLeft" />
      </div>

      <!-- 中间的logo背景 -->
      <div class="bg-logo">
        <BaseImage :url="bgLogo" />
      </div>

      <div class="user-profile" @click="pushRouter('/personal/personal-data')">
        <div class="avatar">
          <!-- 用户头像 -->
          <BaseImage width="48px" style="height: 48px;" :url="avatar" />
        </div>
        <div class="user-info">
          <div class="username">{{ userInfoDate.username }}</div>
          <div class="user-id">{{ userInfoDate.uid }} <span class="copy-icon"></span></div>
        </div>
        <div class="chevron-right">
          <BaseImage width="7px" style="height: 11px;" :url="arrowRight" />
        </div>
      </div>

      <!-- VIP卡片 -->
      <div class="vip-card"  @click="pushRouter('/vip')">
        <div class="vip-row">
          <div class="vip-level">VIP {{ currentLevel?.level || 0 }}</div>
          <div class="vip-club">
            <span class="club-text">{{ t('vip_club') }}</span>
            <span class="club-icon">
              <BaseImage width="4.5px" style="height: 6.98px;" :url="arrowRightGreen" />
            </span>
          </div>
        </div>

        <div class="vip-progress">
          <div class="progress-bar">
            <div class="green-dot" :style="{ left: `calc(${_progressString} - 8.75px)` }"></div>
            <div class="progress-bar-bg">
              <div class="progress-fill" :style="{ width: _progressString }"></div>
            </div>
          </div>
          <div class="xp-text">{{ Number(currentLevel?.upgrade) }} XP {{ t('to') }} <span class="target-level">
              VIP {{ Number(currentLevel?.level) + 1 || 0 }}
            </span></div>
        </div>
      </div>

      <!-- 总结余区域 - 独立于VIP卡片 -->
      <div class="balance-section">
        <div class="coin-icon">
          <BaseImage width="27px" style="height:21px" :url="priceIcon" />
        </div>
        <div class="balance-label">{{ t('total_balance') }}</div>
        <div class="balance-amount">USD {{ userInfo?.deposit_retain }}</div>
      </div>

      <!-- 按钮区域 -->
      <div class="action-buttons">
        <button class="deposit-button" @click="pushRouter('/withdraw')">
          <span class="button-icon">
            <BaseImage width="21px" style="height:21px" :url="balanceIcon" />
          </span>
          {{ t('deposit') }}
        </button>

        <div class="sub-buttons">
          <button class="withdraw-button" @click="pushRouter('/withdraw')" >
            <span class="button-icon">
              <BaseImage width="21px" style="height:21px" :url="drawing" />
            </span>
            {{ t('withdraw') }}
          </button>
          <button class="exchange-button" @click="pushRouter('/withdraw', 1)">
            <span class="button-icon">
              <BaseImage width="21px" style="height:21px" :url="monetary" />
            </span>
            {{ t('currency_exchange') }}
          </button>
        </div>
      </div>
    </div>

    <!-- 菜单区域 - 使用二维数组循环渲染 -->
    <div class="menu-section">
      <div v-for="(menuGroup, groupIndex) in menuGroups" :key="'group-' + groupIndex" class="menu-group">
        <div v-for="(item, itemIndex) in menuGroup" :key="'item-' + groupIndex + '-' + itemIndex" class="menu-item"
          @click="item.isLanguageMenu ? openLanguageSelect() : item.isExchangeCode ? openExchangeCodeDialog() :pushMenu(item)">
          <div class="item-left">
            <div class="item-icon">
              <BaseImage width="20px" style="height:20px" :url="item.icon" />
            </div>
            <div class="item-title">{{ item.title }}</div>
          </div>

          <div class="item-right">
            <div v-if="item.notification && item.notification > 0" class="notification-badge">
              {{ item.notification }}
            </div>
            <div v-if="item.hasRightText" class="right-text">
              {{ item.rightText }}
            </div>
            <div class="arrow-icon">
              <BaseImage width="7px" style="height: 11px;" :url="arrowRight" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex items-center justify-center my-6 gap-1" @click="handleLogout">
      <BaseImage width="16px" :url="logoutIcon" class="logout"/>
      <div>{{ t('logout') }}</div>
    </div>

    <!-- 登出确认弹窗 -->
    <div v-if="showLogoutModal" class="logout-modal-overlay" @click.self="cancelLogout">
      <div class="logout-modal">
        <div class="close-icon" @click="cancelLogout">×</div>
        <div class="flex justify-center items-center text-[14px]">
          {{ t('logout') }}
        </div>
        <div class="logout-message">
          {{ t('logout_confirm_message') }}
        </div>
        <div class="logout-buttons">
          <button class="cancel-button" @click="cancelLogout">{{ t('common_cancel') }}</button>
          <button class="confirm-button" @click="confirmLogout">{{ t('logout') }}</button>
        </div>
      </div>
    </div>
    <!-- 兑换码弹窗 -->
    <div v-if="showRedemptionModal" class="logout-modal-overlay" @click.self="cancelRedemption">
      <div class="logout-modal">
        <div class="close-icon" @click="cancelRedemption">×</div>
        <div class="flex justify-center items-center text-[14px]">
          {{ t('redemption_bonus_code') }}
        </div>
        <div class="grid justify-center items-center grid-cols-1 gap-4">
          <div class="redemption-message">
            {{ t('redemption_bonus_message') }}
          </div>
          <div  class="search-container">
              <BaseImage width="24px" :url="iconSearch" />
              <input v-model="redemptionCode" type="text" placeholder="输入红利代码" class="search-input" />
            </div>
          <div class="logout-buttons">
            <button class="confirm-button" @click="submitRedemptionCode">{{ t('redemption') }}</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 语言选择器 - 隐藏触发按钮 -->
    <AppSelect v-model="currentLanguage" :options="languageOptions" @update:modelValue="handleSelectLanguage"
      ref="languageSelectRef" :showTrigger="false" />
  </div>
</template>

<style lang="scss" scoped>
.personal-container {
  background-color: #232626;
  min-height: 100vh;
  color: white;
}

.header-section {
  background: linear-gradient(0deg, #232626, #232626),
    linear-gradient(180deg, #0F5B3E 0%, rgba(32, 69, 53, 0.4) 60%, rgba(32, 69, 53, 0) 100%);
  padding: 16px;
  position: relative;
  padding-bottom: 1px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, #0F5B3E 0%, rgba(32, 69, 53, 0.4) 60%, rgba(32, 69, 53, 0) 100%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
  }

  .back-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    border-radius: 5.23px;
    background: var(--black-505, #0000000D);
  }

  .bg-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 170px;
    opacity: 0.9;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .user-profile {
    display: flex;
    align-items: center;
    margin-top: 90px;
    margin-bottom: 20px;
    padding-right: 10px;
    position: relative;
    z-index: 5;

    .avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3A4142;
    }

    .user-info {
      flex: 1;

      .username {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .user-id {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;

        .copy-icon {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-left: 4px;
          // @include getBackgroundImage('png/icons/copy.png');
          background-size: contain;
        }
      }
    }

    .chevron-right {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.6);
      margin-left: 10px;
    }
  }

  .vip-card {
    background:
      linear-gradient(to right, #95FFEC00, #73AFA833);

    border-radius: 10px;
    padding: 16px 0;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    .vip-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .vip-level {
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin-left: 15px;
      }

      .vip-club {
        display: flex;
        align-items: center;
        background: #FFFFFF1A;
        border-radius: 11px 0 0 11px;
        padding: 4px 10px;

        .club-text {
          color: #24EE89;
          font-family: SF Pro;
          font-weight: 590;
          font-size: 10px;
          line-height: 13.95px;
          letter-spacing: 0%;
          vertical-align: middle;
        }

        .club-icon {
          margin-left: 6px;
          color: #24ee89;
          font-size: 12px;
        }
      }
    }

    .vip-progress {
      display: flex;
      align-items: center;
      margin-left: 5px;
      position: relative;
      padding-left: 8px;

      .progress-bar {
        flex: 1;
        position: relative;
        .progress-bar-bg {
          width: 100%;
          height: 7px;
          background-color: #00000033;
          position: relative;
          border-radius: 6.98px;
          background: #232626;
          overflow: hidden;
          .progress-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0%;
            background-color: #24ee89;
            border-radius: 6.98px;
          }
        }

        .green-dot {
          position: absolute;
          width: 17.5px;
          height: 17.5px;
          background: rgba(36, 238, 137, 0.3);
          border-radius: 50%;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          flex-shrink: 0;
          z-index: 5;

          &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8.7px;
            height: 8.7px;
            background-color: #24EE89;
            border-radius: 50%;
          }
        }
      }


      .xp-text {
        margin-left: 14px;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        margin-right: 15px;
        font-weight: 590;
        font-size: 12px;
      }

      .target-level {
        color: #B3BEC1;
      }
    }
  }

  .balance-section {
    background-color: #232626;
    padding: 16px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;

    .coin-icon {
      width: 24px;
      height: 24px;
      margin-right: 4px;
      transform: translateY(2px);
    }

    .balance-label {
      flex: 1;
      font-size: 14px;
      color: #B3BEC1;
    }

    .balance-amount {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .action-buttons {
    position: relative;
    padding: 12px 8px;
    background: #323738;
    border-radius: 8px;
    z-index: 5;

    .deposit-button {
      width: 100%;
      height: 40px;
      background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
      border: none;
      border-radius: 8px;
      color: #1a1d1e;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      box-shadow: 0px -2px 0px 0px #1DCA6A inset;
      box-shadow: 0px 0px 12px 0px #23EE884D;


      .button-icon {
        margin-right: 8px;
      }
    }

    .sub-buttons {
      display: flex;
      gap: 12px;

      .withdraw-button,
      .exchange-button {
        flex: 1;
        height: 35px;
        background-color: #3A4142;
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;

        .button-icon {
          margin-right: 6px;
        }
      }
    }
  }
}

.menu-section {
  margin-top: 15px;

  .menu-group {
    background: #323738;
    border-radius: 10px;
    margin: 0 12px 16px;
    overflow: hidden;

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 16px;

      .item-left {
        display: flex;
        align-items: center;

        .item-icon {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 6px;

          i {
            font-size: 18px;
            color: #FFFFFF;
          }

          .icon-interest:before {
            content: "📊";
          }

          .icon-affiliate:before {
            content: "🔗";
          }

          .icon-stats:before {
            content: "📈";
          }

          .icon-transaction:before {
            content: "💹";
          }

          .icon-bets:before {
            content: "🎲";
          }

          .icon-rebate:before {
            content: "💰";
          }

          .icon-promotions:before {
            content: "🎁";
          }

          .icon-exchange-code:before {
            content: "🎫";
          }

          .icon-notification:before {
            content: "🔔";
          }

          .icon-settings:before {
            content: "⚙️";
          }

          .icon-support:before {
            content: "🎧";
          }

          .icon-language:before {
            content: "🌐";
          }

          .icon-feedback:before {
            content: "📝";
          }
        }

        .item-title {
          font-size: 14px;
          color: #FFFFFF;
          font-weight: 600;
        }
      }

      .item-right {
        display: flex;
        align-items: center;

        .notification-badge {
          background-color: #9FE871;
          color: #000000;
          border-radius: 5.23px;
          min-width: 21px;
          height: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 4px;
          font-size: 10px;
          font-weight: bold;
          margin-right: 10px;
        }

        .right-text {
          font-size: 13px;
          color: #B3BEC1;
          margin-right: 10px;
        }

        .arrow-icon {
          width: 28px;
          height: 28px;
          background: #464f50;
          border-radius: 5.23px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
.logout{
  transform: rotate(180deg);
}
/* 登出弹窗样式 */
.logout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  animation: fadeIn 0.2s ease-out;
}

.logout-modal {
  width: 100%;
  background-color: #232626;
  border-radius: 12px 12px 0 0;
  padding: 18px 16px;
  padding-bottom: 25px;
  position: relative;
  animation: slideUp 0.3s ease-out;
}

.close-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  color: #fff;
  width: 28px;
  height: 28px;
  background-color: #4A5354;
  border-radius: 6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.logout-message {
  text-align: center;
  padding: 20px 0 30px;
  margin-top: 15px;
  font-size: 12px;
  color: #B3BEC1;
  font-family: SF Pro;
  font-weight: 400;
  line-height: 18.31px;
  vertical-align: middle;
}

.logout-buttons {
  display: flex;
  gap: 12px;
}

.cancel-button,
.confirm-button {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.cancel-button {
  background-color: #323738;
  color: #FFFFFF;
}

.confirm-button {
  background: linear-gradient(90deg, #24EE89 0%, #9FE871 100%);
  box-shadow: 0px -2px 0px 0px #1DCA6A inset, 0px 0px 12px 0px #23EE884D;
  color: #1a1d1e;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}
 // 搜索框样式
.search-container {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #323738;
  border-radius: 6px;
  border: 2px solid var(---border-black-33B4041, #3B4041);
  height: 40px;
  padding-right: 12px;
  padding-left: 12px;
  border-radius: 6px;
  border-width: 1px;

}
.search-input {
  width: 100%;
  height: 40px;
  border: none;
  padding-right: 12px;
  color: #B3BEC1;
  font-size: 14px;

  &::placeholder {
    color: #7A8283;
    }
  }
  .redemption-message{
    margin-top: 15px;
    font-size: 12px;
    color: #B3BEC1;
    font-family: SF Pro;
    font-weight: 400;
    line-height: 18.31px;
    vertical-align: middle;
  }
</style>
